<template>
<!-- backTop、scroll 功能没有混入备份版 -->
  <div class="detail" id="Detail">
    <detail-nav-bar class="detail-nav-bar" />
    <scroll
      class="content" 
      ref="scroll" 
      :probeType="3" 
      @scroll="contentScroll" 
      :data="[topImages, goods, shop, detailInfo, paramInfo, commentInfo, recommendList]" 
    >
      <detail-swiper :banners="topImages" />
      <detail-base-info :goods="goods" />
      <detail-shop-info :shop="shop" />
      <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoad" />
      <!-- <detail-goods-info :detail-info="detailInfo"/> -->
      <detail-param-info :paramInfo="paramInfo" />
      <detail-comment-info :comment-info="commentInfo" />
      <detail-recommend-info :recommend-list="recommendList" />
    </scroll>

    <back-top @backTop="backTop" v-show="showBackTop" />
  </div>
</template>

<script>
// 导入请求相关
import {
  getDetailData,
  getRecommend,
  Goods,
  Shop,
  GoodsParam
} from "@//network/detail.js";
// 导入组件相关
import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailParamInfo from "./childComps/DetailParamInfo";
import DetailCommentInfo from "./childComps/DetailCommentInfo";
import DetailRecommendInfo from "./childComps/DetailRecommendInfo";

import Scroll from "@/components/content/scroll/Scroll.vue";
import BackTop from "@/components/content/backTop/BackTop";

import { mixinRefresh, mixinGoTop } from "@/common/utils/mixin.js";

import { BACKTOP_DISTANCE } from "@/common/const";

export default {
  mixins: [mixinRefresh, mixinGoTop],
  data() {
    return {
      iid: null,
      topImages: [], // banner数据
      goods: {}, // DetailBaseInfo数据
      shop: {}, //  DetailShopInfo数据
      detailInfo: {}, // DetailGoodsInfo数据
      paramInfo: {}, // DetailParamInfo数据
      commentInfo: {}, // DetailCommentInfo数据
      recommendList: [], // DetailRecommendInfo数据
      showBackTop: false
    };
  },
  activated() {
    this._getDetailData();
    this._getRecommend();
  },
  methods: {
    _getDetailData() {
      this.topImages = []; // 清空上一次缓存的banner数据，由于组件缓存机制？
      // 1、保存传入的iis
      this.iid = this.$route.params.iid;
      // 2、根据iid请求数据
      getDetailData(this.iid).then(res => {
        // 2.1.获取结果
        const data = res.result;
        // 2.2.获取顶部信息
        this.topImages = data.itemInfo.topImages;
        // 2.3.获取商品信息
        this.goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        // 2.4.获取店铺信息
        this.shop = new Shop(data.shopInfo);
        // 2.5.获取商品信息
        this.detailInfo = data.detailInfo;
        // 2.6.保存参数信息
        this.paramInfo = new GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );
        // 2.7.保存评论信息
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
      });
    },
    _getRecommend() {
      // 请求DetailRecommendInfo数据
      getRecommend()
        .then(res => {
          this.recommendList = res.data.list;
        })
        .catch(err => {
          console.log(err);
        });
    },
    imgLoad() { // 监听图片加载完毕
      this.newRefresh(); // 新refresh函数，mixin中
    },
    contentScroll(position) {   // scroll滚动事件
      console.log(position.y);
      this.showBackTop = position.y < -BACKTOP_DISTANCE; // 决定backTop是否显示
    }
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    Scroll,
    DetailCommentInfo,
    DetailRecommendInfo,
    BackTop
  }
};
</script>



<style lang="scss" scoped>
#Detail {
  height: 100vh;
  position: relative;
  z-index: 500;
  background-color: #fff;
}
.detail-nav-bar {
  position: relative;
  z-index: 600;
  background: #ffffff;
}

.content {
  position: absolute;
  top: 0.86rem;
  left: 0;
  right: 0;
  bottom: 60px;
}
</style>